<template>
    <el-dialog
        :title="row ? '编辑用户' : '添加用户'"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="550px"
        top="20px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                size="small"
                label-width="120px"
            >
                <el-form-item label="用户账户：" prop="userName">
                    <el-input
                        class="formItem"
                        placeholder="请输入用户账户"
                        v-model="form.userName"
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户密码：" prop="passWord">
                    <el-input
                        class="formItem"
                        placeholder="请输入用户密码"
                        v-model="form.passWord"
                        show-password
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="公司名称："
                    prop="userFullName"
                    v-if="currentRole.roleCode === 2"
                >
                    <el-input
                        class="formItem"
                        placeholder="请输入公司名称"
                        v-model="form.userFullName"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="销售名称："
                    prop="saleName"
                    v-if="
                        currentRole.roleTypeCode === 1 ||
                        currentRole.roleTypeCode === 2
                    "
                >
                    <el-select
                        class="items"
                        v-model="form.saleName"
                        filterable
                        clearable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in saleList"
                            :key="item.borrowAdminName"
                            :label="item.borrowAdminName"
                            :value="item.borrowAdminName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="启用" :value="0"> </el-option>
                        <el-option label="停用" :value="1"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="特殊代理商："
                    prop="isSpecial"
                    v-if="
                        currentRole.roleCode === 2 &&
                        roleId === 1 &&
                        (manageRoleType === 0 || manageRoleType === 3)
                    "
                >
                    <el-switch
                        v-model="form.isSpecial"
                        :active-value="1"
                        :inactive-value="0"
                    >
                    </el-switch>
                    <!-- <el-tooltip :content="'Switch value: ' + value" placement="top">
                      <i class="el-icon-question"></i>
                        </el-tooltip> -->
                    <span class="red">(此代理商存在另一个旧帐号)</span>
                </el-form-item>
                <el-form-item
                    label="代理商权限："
                    v-if="currentRole.roleType === 1"
                    prop="agentSelectAll"
                >
                    <el-radio-group
                        @change="changeCheck"
                        :true-label="1"
                        :false-label="0"
                        v-model="form.agentSelectAll"
                    >
                        <el-radio :label="1">不限制</el-radio>
                        <el-radio :label="0">指定代理商</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="代理商："
                    v-if="
                        currentRole.roleType === 1 && form.agentSelectAll === 0
                    "
                    prop="agentList"
                >
                    <el-input
                        style="margin-bottom: 10px"
                        placeholder="输入名称过滤"
                        v-model="filterText"
                        clearable
                    >
                    </el-input>
                    <div class="checkboxWrap">
                        <el-checkbox-group
                            style="display: flex; flex-wrap: wrap"
                            v-model="form.agentList"
                        >
                            <el-checkbox
                                class="checkItem"
                                :label="item.id"
                                v-for="(item, index) in agentAllList"
                                :key="index"
                            >
                                <span :title="item.userName">
                                    {{ item.userName }}</span
                                >
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        row: Object,
        currentRole: Object
    },
    components: {
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        }
    },
    data () {
        return {
            saleList: [],
            copyList: [],
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'userName'
            },
            showTree: false,
            loading: false,
            showValue: false,
            form: {
                isSpecial: 0,
                userFullName: '',
                agentSelectAll: 1,
                status: 0,
                userName: '',
                passWord: '',
                saleName: '',
                agentList: []
            },
            rules: {
                userName: [
                    { required: true, message: '请输入用户账户', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                saleName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                passWord: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' }
                ]
            },
            agentAllList: [],
            allID: []
        }
    },
    watch: {
        filterText (val) {
            this.agentAllList = this.copyList.filter(item => item.userName.includes(val))
        },
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                if (this.row.id) {
                    if (this.currentRole.roleType === 1) {
                        this.getAllAgent()
                        this.getAdminCode()
                    }
                    this.row.saleName = this.row.userFullName
                    this.form = this.copyArr(this.row)
                } else {
                    this.form = {
                        agentSelectAll: 1,
                        isSpecial: 0,
                        status: 0,
                        saleName: '',
                        userName: '',
                        userFullName: '',
                        passWord: '',
                        agentList: []
                    }
                }
            }
            this.$emit('update:value', val)
        }
    },
    created () {
        this.getAllAgent()
        this.getAdminCode()
    },
    methods: {
        async getAdminCode () {
            const res = await this.$http.post(this.$store.state.IP + '/system/company/getAdminCode', {
            })
            let response = res.data
            if (response.ret === '0') {
                this.saleList = response.data
            }
        },
        changeCheck (val) {
            if (this.form.agentSelectAll === 0) {
                this.form.agentList = []
            }
        },
        getAllAgent () {
            this.allID = []
            this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    console.log(response.data)
                    this.agentAllList = response.data
                    this.copyList = response.data
                    this.agentAllList.forEach(item => {
                        this.allID.push(item.id)
                    })
                    if (this.form.agentSelectAll === 1) {
                        this.form.agentList = this.allID
                    }
                    console.log(this.form.agentList.length, 'agentList')
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        // 清空数据
        clearData () {
            this.filterText = ''
            this.$refs.form.resetFields()
            this.form.agentList = []
            this.form.agentSelectAll = 1
            this.form.isSpecial = 0
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        save () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.agentList.length === 0 && this.form.agentSelectAll === 0 && this.currentRole.roleType === 1) {
                        return this.$message({
                            message: '代理商不能为空',
                            type: 'warning'
                        })
                    }
                    this.loading = true
                    if (this.currentRole.roleTypeCode === 1 || this.currentRole.roleTypeCode === 2) {
                        this.form.userFullName = this.form.saleName
                    }
                    this.$http.post(this.$store.state.IP + '/systemUserManage/addUser', {
                        id: this.form.id,
                        passWord: this.form.passWord,
                        roleId: this.currentRole.id,
                        status: this.form.status,
                        userFullName: this.form.userFullName,
                        userName: this.form.userName,
                        agentList: this.form.agentList,
                        isSpecial: this.form.isSpecial,
                        agentSelectAll: this.form.agentSelectAll
                    },
                        {
                            'emulateJSON': false
                        }
                    ).then(response => {
                        console.log('-------------------------------------------')
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.clearData()
                            this.$emit('getList')
                        }
                        this.loading = false
                    }, response => {
                        console.log('通讯失败')
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.red
    color: red

.formItem
    width: 220px

.checkboxWrap
    height: 300px
    overflow: auto

.checkItem
    width: 180px
    display: flex
    align-items: center
    margin-left: 0 !important
</style>